<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      class="mt-dialog"
      @close="close"
    >
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="账号信息" name="first">
          <el-form
            ref="dataForm"
            :model="temp"
            label-position="left"
            label-width="120px"
            style="width: 80%; margin-left:10%;"
          >
            <el-form-item label="id">
              <el-input v-model="temp.id" disabled />
            </el-form-item>
            <el-form-item label="domain">
              <el-input v-model="temp.domain" />
            </el-form-item>
            <el-form-item label="admin_url">
              <el-input v-model="temp.admin_url" />
            </el-form-item>
            <el-form-item label="username">
              <el-input v-model="temp.username" />
            </el-form-item>
            <el-form-item label="password">
              <el-input v-model="temp.password" />
            </el-form-item>
            <el-form-item label="type">
              <el-select v-model="temp.type" placeholder="请选择">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="version">
              <el-input v-model="temp.version" />
            </el-form-item>
            <el-form-item label="当前状态">
              <el-select v-model="temp.upload_state" size="mini" placeholder="当前状态">
                <el-option
                  v-for="item in uploadStateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="备注信息" name="second">
          <el-form
            ref="dataForm"
            :model="temp"
            label-position="left"
            label-width="120px"
            style="width: 80%; margin-left:10%;"
          >
            <el-form-item label="tag">
              <el-input v-model="temp.tag" />
            </el-form-item>
            <el-form-item label="note">
              <el-input v-model="temp.note" />
            </el-form-item>
            <el-form-item label="domain_isp">
              <el-input v-model="temp.domain_isp" />
            </el-form-item>
            <el-form-item label="isEnable">
              <el-switch
                v-model="temp.isEnable"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-loading="loadcontrol" label="上传控制" name="taskcontrol">
          <el-form
            ref="dataForm"
            :model="autoControlForm"
            label-position="left"
            label-width="120px"
            style="width: 80%; margin-left:10%;"
          >
            <el-form-item label="website id">
              <el-input v-model="autoControlForm.website_id" />
            </el-form-item>
            <el-form-item label="每日最多上传">
              <el-input v-model="autoControlForm.auto_upload_daily_max" />
            </el-form-item>
            <el-form-item label="开始时间">
              <el-input v-model="autoControlForm.auto_begin_at" />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-input v-model="autoControlForm.auto_end_at" />
            </el-form-item>
            <el-form-item label="允许上传">
              <el-switch
                v-model="autoControlForm.enable"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
            <el-form-item label="队列状态">
              <el-select v-model="autoControlForm.state" size="mini" placeholder="当前状态">
                <el-option
                  v-for="item in task_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!--              <el-dropdown size="mini" split-button :type="task_options[autoControlForm.state-1].type">-->
              <!--                {{ task_options[autoControlForm.state-1].label }}-->
              <!--                <el-dropdown-menu slot="dropdown">-->
              <!--                  <el-dropdown-item v-if="autoControlForm.state != 1" @click="autoControlForm.state=1">开始运行-->
              <!--                  </el-dropdown-item>-->
              <!--                  <el-dropdown-item v-if="autoControlForm.state != 2" @click="autoControlForm.state=2">结束运行-->
              <!--                  </el-dropdown-item>-->
              <!--                </el-dropdown-menu>-->
              <!--              </el-dropdown>-->
            </el-form-item>

          </el-form>
        </el-tab-pane>
        <el-tab-pane v-loading="autodeleteloading" label="自动删除" name="autodelete">
          <h3 v-if="autodelete_temp.id !== undefined" style="text-align: center; color: yellow">修改自动删除规则</h3>
          <h3 v-else style="text-align: center; color: green">添加自动删除规则</h3>
          <el-form
            ref="dataForm"
            :model="autodelete_temp"
            label-position="left"
            label-width="180px"
            style="width: 80%; margin-left:10%;"
          >
            <el-form-item label="website id">
              <el-input v-model="autodelete_temp.website_id" />
            </el-form-item>
            <el-form-item label="产品上传最短天数">
              <el-input v-model="autodelete_temp.create_min_days" />
            </el-form-item>
            <el-form-item label="广告无展示天数">
              <el-input v-model="autodelete_temp.ads_no_shown_days" />
            </el-form-item>
            <el-form-item label="广告持续展示无订单天数">
              <el-input v-model="autodelete_temp.ads_shown_no_order_days" />
            </el-form-item>
            <el-form-item label="未出订单">
              <el-switch
                v-model="autodelete_temp.no_order"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-form>
          <el-button v-if="autodelete_temp.id !== undefined" type="warning" @click="handleDeleteAutoDeleteRule">删除规则</el-button>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogVisible=false">取消</el-button>
        <el-button v-if="activeName === 'first' || activeName === 'second'" type="primary" @click="confirm('edit')">确认</el-button>
        <el-button v-else-if="activeName === 'taskcontrol'" type="primary" @click="DoAutoControlUpdate">修改上传控制</el-button>
        <el-button v-else-if="activeName === 'autodelete'" type="primary" @click="DoAutoDeleteUpdate">修改自动删除规则</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Get, Post, Put, Delete, GetWebsiteStateOptions } from '@/api/erp/elicink/website'
import { Get as GetUploadTaskControl, Put as EditControlUpdate } from '@/api/erp/uploadtaskcontrol'
import { Get as GetProductAutoDeleteRule, Put as EditProductAutoDeleteRule, Post as CreateProductAutoDeleteRule, Delete as DeleteProductAutoDeleteRule } from '@/api/erp/elicink/websiteproductautodeleterule'
import qs from 'qs'

export default {
  name: 'WebsiteEditor',
  props: ['domain', 'isVisible'],
  data() {
    return {
      autodeleteloading: false,
      autodelete_temp: {
        website_id: '',
        no_order: true,
        create_min_days: 180,
        ads_no_shown_days: 180,
        ads_shown_no_order_days: 180
      },
      dialogTitle: '',
      loadcontrol: false,
      uploadStateOptions: GetWebsiteStateOptions(),
      activeName: 'first',
      dialogVisible: false,
      UploadTask: {},
      website_id: '',
      temp: {
        'id': '',
        'domain': ''
      },
      autoControlForm: {
        website_id: '',
        state: 4,
        auto_upload_daily_max: 500,
        auto_begin_at: '00:00:01',
        auto_end_at: '23:00:00'
      },
      task_options: [
        {
          value: 1,
          type: 'danger',
          label: '正在运行'
        },
        {
          value: 2,
          type: 'success',
          label: '已经停止'
        },
        {
          value: 3,
          type: 'warning',
          label: '运行错误'
        },
        {
          value: 4,
          type: 'primary',
          label: '未开始'
        }
      ],
      typeOptions: [
        {
          label: 'PrestaShop',
          value: 'PrestaShop'
        },
        {
          label: 'WooCommerce',
          value: 'WooCommerce'
        },
        {
          label: 'BigCommerce',
          value: 'BigCommerce'
        },
        {
          label: 'Shopify',
          value: 'Shopify'
        },
        {
          label: 'Wordpress Blog',
          value: 'Wordpress_Blog'
        }
      ]
    }
  },
  watch: {
    isVisible(v) {
      this.dialogVisible = v
      this.handleGetWebsite()
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        'id': '',
        'domain': ''
      }
    },
    handleTabClick(v) {
      console.log('tab clicked')
      if (v.name === 'taskcontrol') {
        this.handleGetUploadTaskControl()
      }
      if (v.name === 'autodelete') {
        console.log('change auto delete')
        this.handleGetProductAutoDeleteRule()
      }
    },
    handleGetProductAutoDeleteRule() {
      this.autodeleteloading = true
      GetProductAutoDeleteRule(null, null, qs.stringify({
        website_id: this.temp.id
      })).then(response => {
        if (response.data.data[0] !== undefined) {
          this.autodelete_temp = response.data.data[0]
        } else {
          this.autodelete_temp = {
            website_id: this.temp.id,
            no_order: true,
            create_min_days: 180,
            ads_no_shown_days: 180,
            ads_shown_no_order_days: 180
          }
        }
        this.autodeleteloading = false
      }).catch(err => {
        console.log(err)
        this.autodelete_temp = {
          website_id: this.temp.id,
          no_order: true,
          create_min_days: 180,
          ads_no_shown_days: 180,
          ads_shown_no_order_days: 180
        }
        this.autodeleteloading = false
      })
    },
    handleGetUploadTaskControl() {
      this.loadcontrol = true
      GetUploadTaskControl(null, qs.stringify({
        website_id: this.temp.id
      }))
        .then(response => {
          if (response.data.data[0] !== undefined) {
            this.autoControlForm = response.data.data[0]
          }

          this.loadcontrol = false
        }).catch(err => {
          console.log(err)
          this.loadcontrol = false
        })
    },
    handleDeleteAutoDeleteRule() {
      if (this.autodelete_temp.id) {
        DeleteProductAutoDeleteRule(this.autodelete_temp.id).then(response => {
          this.notify('删除控制参数成功')
          this.handleGetProductAutoDeleteRule()
        }).catch(err => {
          console.log(err)
          this.handleGetProductAutoDeleteRule()
        })
      }
    },
    DoAutoDeleteUpdate() {
      if (this.autodelete_temp.id) {
        EditProductAutoDeleteRule(this.autodelete_temp.id, this.autodelete_temp).then(response => {
          this.notify('修改控制参数成功')
        }).catch(err => {
          console.log(err)
        })
      } else {
        CreateProductAutoDeleteRule(this.autodelete_temp).then(response => {
          this.notify('添加控制参数成功')
          this.handleGetProductAutoDeleteRule()
        }).catch(err => {
          console.log(err)
        })
      }
    },
    DoAutoControlUpdate() {
      this.$confirm('是否确定切换状态, 在下一个循环周期将会生效?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        EditControlUpdate(this.autoControlForm.id, this.autoControlForm).then(response => {
          this.notify('修改控制参数成功')
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleGetWebsite() {
      Get(null, qs.stringify({
        kw: this.domain,
        pagesize: 1,
        page: 1
      })).then(response => {
        this.temp = response.data.data[0]
        this.autoControlForm.website_id = this.temp.id
        this.autodelete_temp.website_id = this.temp.id
        this.dialogTitle = this.temp.domain + '网站信息快速查询修改'
        if (this.temp.id !== '') {
          this.handleGetUploadTaskControl()
        }
      })
    },
    confirm(action) {
      const _data = this.temp
      switch (action) {
        case 'create':
          Post(this.temp).then((response) => {
            this.dialogVisible = false
            this.$emit('reload')
            this.notify('添加成功')
          })
          break
        case 'delete':
          Delete(_data.id).then((response) => {
            this.dialogVisible = false
            this.$emit('reload')
            this.notify('删除成功')
          })
          break
        case 'edit':
          Put(_data.id, _data).then((response) => {
            this.dialogVisible = false
            this.$emit('reload')
            this.notify('更新成功')
          })
          break
      }
    },
    close() {
      this.$emit('close', false)
    },
    notify(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.mt-dialog >>> span.el-dialog__title {
  word-break: normal;
  width: auto;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}
</style>
